<template>
  <div>
    <van-popup
      class="complete-popup task-handle-popup"
      v-bind="$attrs"
      position="right"
      :style="{ width: '100%', height: '100%' }"
      v-on="$listeners"
      get-container="body"
    >
      <van-nav-bar
        class="gm-nav-bar"
        left-text="确认订单"
        left-arrow
        @click-left="$emit('input', false)"
      />
      <van-cell-group class="handle-cont">
        <van-field :value="activeData.Number" label="报修编号" readonly />
        <van-field
          :value="activeData.OrderDescription"
          label="报修设备"
          type="textarea"
          rows="1"
          autosize
          placeholder="未知"
          readonly
        />
        <van-field
          :value="activeData.FailureType"
          label="故障类型"
          type="textarea"
          rows="1"
          autosize
          placeholder="未知"
          readonly
        />
        <van-field label="邀请厂家协助">
          <template #input>
            <van-switch v-model="isAskForManufacturers" size="22" />
          </template>
        </van-field>
        <van-field label="采购协助">
          <template #input>
            <van-switch v-model="isAskForShopping" size="22" />
          </template>
        </van-field>
        <van-field
          v-model="remark"
          label="备注信息"
          ttype="textarea"
          rows="1"
          autosize
          placeholder="请输入备注信息"
        />
        <van-radio-group
          v-model="riskTreatment"
          v-if="!isAskForManufacturers && !isAskForShopping"
        >
          <van-cell-group>
            <van-field
              required
              label="选择对策"
              is-link
              @click="riskTreatment = '临时对策'"
            >
              <template #input>
                <div class="cell-radio-box">
                  <van-radio name="临时对策">临时对策</van-radio>
                  <div
                    class="input-wrap"
                    v-show="riskTreatment === '临时对策'"
                    @click.stop="timePickerShow = true"
                  >
                    <input
                      v-model="permanentDecisionTime"
                      type="text"
                      placeholder="请选择永久对策时间"
                      readonly
                    />
                  </div>
                </div>
              </template>
            </van-field>
            <van-field label=" " @click="riskTreatment = '永久对策'">
              <template #input>
                <van-radio name="永久对策">永久对策</van-radio>
              </template>
            </van-field>
          </van-cell-group>
        </van-radio-group>
        <van-cell />
      </van-cell-group>
      <van-row class="handle-footer" gutter="20">
        <van-col span="12">
          <van-button type="default" block @click="handleCancel">
            取消
          </van-button>
        </van-col>
        <van-col span="12">
          <van-button type="info" block @click="handleConfirm">
            确定
          </van-button>
        </van-col>
      </van-row>
    </van-popup>
    <van-popup v-model="timePickerShow" position="bottom" round>
      <van-datetime-picker
        v-model="timePickerTime"
        type="date"
        title="选择永久决策时间"
        :min-date="minDate"
        @confirm="timeConfirm"
        @cancel="timePickerShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Pad_Repair_ProcessingTasks } from "../../api/index";
import { parseTime } from "../../utils/index";
export default {
  name: "CompletePopup",
  inheritAttrs: false,
  props: {
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    activeData: {
      handler(val, oldVal) {
        if (val.Id !== oldVal.Id) {
          this.reset();
        }
      },
      deep: true,
    },
  },
  components: {
    "van-radio": () => import("@/components/common/GmRadio.vue"),
  },
  data() {
    return {
      // 邀请厂家协助
      isAskForManufacturers: false,
      // 采购协助
      isAskForShopping: false,
      // 备注信息
      remark: "",
      // 选择对策
      riskTreatment: "",
      // 临时对策时间
      permanentDecisionTime: "",
      timePickerShow: false,
      timePickerTime: "",
      minDate: new Date(),
    };
  },
  methods: {
    reset() {
      console.log("重置");
    },
    handleCancel() {
      this.$emit("input", false);
    },
    handleConfirm() {
      let flag = true;
      if (!this.isAskForManufacturers && !this.isAskForShopping) {
        if (this.riskTreatment === "") {
          flag = false;
          this.$toast("请选择对策！");
        } else if (
          this.riskTreatment === "临时对策" &&
          this.permanentDecisionTime === ""
        ) {
          flag = false;
          this.$toast("请选择临时对策时间！");
        }
      }

      if (flag) {
        const params = {
          RepairId: this.activeData.Id,
          IsManufactor: this.isAskForManufacturers,
          IsPurchase: this.isAskForShopping,
          Remarks: this.remark,
          CountermeasureType: this.riskTreatment,
          TemporaryDate: this.permanentDecisionTime,
        };
        Pad_Repair_ProcessingTasks(params)
          .then((res) => {
            if (res.ReturnResult === "1") {
              this.$dialog
                .alert({
                  message: res.Message,
                  className: "success",
                })
                .then(() => {
                  this.$emit("confirm");
                  this.$emit("input", false);
                });
            } else {
              this.$notify(res.Message);
            }
          })
          .catch((err) => {
            this.$notify(err);
          });
      }
    },
    timeConfirm() {
      this.timePickerShow = false;
      this.permanentDecisionTime = parseTime(
        this.timePickerTime,
        "{y}/{m}/{d}"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.cell-radio-box {
  display: flex;

  .van-radio {
    width: 90px;
  }

  .input-wrap {
    flex: 1;

    input {
      width: 100%;
      height: 22px;
      line-height: 22px;
      border: none;
      background: transparent;
      text-align: right;
      color: #777;

      &::-webkit-input-placeholder {
        color: #bbbbbb;
      }

      &::-moz-placeholder {
        color: #bbbbbb;
      }
    }
  }
}
</style>
